<template>
  <div class="admin-develop-index" :style="`height: ${documentHeight}px;`">
    <div class="develop_box">
      <h1 class="develop_box-h1">开发者中心</h1>
      <h1 class="develop_box-h2">-大道同源、开发至简-</h1>
      <div class="develop_box-ul">
        <div @click="developTab(item.url)" class="develop_box-li" v-for="(item,index) in gridList" :key="index" :style="`width: ${100/4}%;`">
          <img class="li_image" :src="item.image" />
          <p class="li_p">{{item.name}}</p>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    data () {
      return {
        documentHeight: 0,
        gridList: [
          { name: 'Api接口', image: require('../../../../static/img/develop/1.png'), url: '/Admin/Develop/Api' },
          { name: '数据结构', image: require('../../../../static/img/develop/2.png'), url: '/Admin/Develop/Data' },
          { name: '前端文档', image: require('../../../../static/img/develop/3.png'), url: '/admin/develop/wiki?id=5e6718d3e208207be03451fc' },
          { name: '后端文档', image: require('../../../../static/img/develop/4.png'), url: '/admin/develop/wiki?id=5e6ec563aad1891a34d08c69' },
          { name: '自动表单', image: require('../../../../static/img/develop/5.png'), url: '' },
          { name: 'Widget元数据', image: require('../../../../static/img/develop/6.png'), url: '' },
          { name: 'Preview预览', image: require('../../../../static/img/develop/7.png'), url: '/admin/develop/form' },
          { name: '自动表单', image: require('../../../../static/img/develop/9.png'), url: '' },
          { name: '自动列表(list)', image: require('../../../../static/img/develop/10.png'), url: '' }]
      }
    },
    mounted () {
      this.init()
    },
    methods: {
      async init () {
        var h = document.documentElement.clientHeight || document.body.clientHeight
        this.documentHeight = h - 74
      },
      developTab (url) {
        if (url.indexOf('https://') > -1) {
          window.open(url)
        } else {
          this.$router.push(url)
        }
      }
    }
  }
</script>
<style lang="scss">
  @import "./var.scss";
</style>